/* JS for tab "homepage" reminder & card */

/** homepage card html example
 * 
<div class="col-xl-4 col-lg-6 col-sm-12 position-relative card-deck-single" name="card_2">

    <div class="card-inner">

        <div class="card front">
            <div class="card-header">
                <div class="header-text">
                    <div class="header-text-title">Pulse</div>
                    <div class="header-text-class">The elements of visualization</div>
                </div>
                <span class="header-symbol"></span>
            </div>
            <div class="card-frontImg">
                <img class="card-img front-gif" src="./assets/image/fail_loading.svg">
                <img class="card-img front-preview" src="./assets/image/loading.svg">
            </div>
            <div class="card-body">
                <div class="card-body-subtitle">HOW</div>
                <p class="card-body-text">Expand and contract rhythmically.</p>
                <div class="card-body-subtitle">WHY</div>
                <p class="card-body-text">Size contrast is a common way of attracting attention
                    and conveying importance.
                </p>
                <div class="card-body-subtitle">Applicable Visualization Techniques</div>
                <p class="card-body-text">Size contrast is a common way of attracting attention
                    and conveying importance.
                </p>
            </div>
            <div class="card-footer">
                <span class="card-footer-num">NO. 1</span>
                <button class="card-footer-bottom">View examples</button>
            </div>
        </div>

        <div class="card back back-none">
            <div class="card-header">
                <div class="header-text">
                    <div class="header-text-title">Pulse</div>
                    <div class="header-text-class">The elements of visualization</div>
                </div>
                <span class="header-symbol"></span>
            </div>
            <div class="card-imgBox">
                <img class="card-img back-gif" src="./assets/image/fail_loading.svg">
                <div class="img-cover">
                    <div class="img-cover-mask"></div>
                    <span class="img-cover-overlay" type="button" data-toggle="modal" data-target="#zooming-modal"></span>
                </div>
            </div>
            <div class="card-body">
                <h6 class="card-body-subtitle">Inequality: how wealth is distributed in the UK - animated video</h6>
                <div class="card-body-caption">
                    <div><span>Source: </span>The Guardian</div>
                    <div><span>Year: </span>2013</div>
                    <div><span>Category: </span>Social Sciences</div>
                    <div><span>Subcategory: </span>Economics</div>
                </div>
            </div>
            <div class="card-footer">
                <a href="https://www.theguardian.com/commentisfree/video/2013/oct/08/inequality-how-wealth-distributed-uk-animated-video"
                    target="_blank">
                    <span class="card-footer-url"></span>URL
                </a>
                <button class="card-footer-bottom">Back to front</button>
            </div>
        </div>

    </div>

</div> */

class Homepage_Card {
    constructor(parameters = { 
        card_id, card_title, VNS_tag, EL_tag, AVT_tag, how, why, 
        eg_title, eg_source, eg_url, eg_year, eg_category, eg_subcategory
    }) {
        this.parameters = {};
        this.parameters = parameters;
    }

    _createCard () {

        // front

        // back

        // insert to card-inner

    }

    /**
    * <div class="card-header">
    *     <div class="header-text">
    *         <div class="header-text-title">Pulse</div>
    *         <div class="header-text-class">The elements of visualization</div>
    *     </div>
    *     <span class="header-symbol"></span>
    * </div> 
    * */
    _createCard_header () {
        let card_header_node = document.createElement("div");
        let header_text_node = document.createElement("div");
        let header_symbol_node = document.createElement("span");  // 缺了icon图片定义
        let title_html = `<div class="header-text-title">${this.parameters["card_title"]}</div>`;
        let class_html = `<div class="header-text-class">${this.parameters["EL_tag"]}</div>`;

        card_header_node.classList.add("card-header");
        header_text_node.classList.add("header-text");
        header_symbol_node.classList.add("header-symbol");

        header_text_node.innerHTML = title_html + class_html;
        [header_text_node, header_symbol_node].forEach((node, i, nodeList) => card_header_node.appendChild(node));
        return card_header_node;
    }

    /**
     * front
    * <div class="card-frontImg">
    *     <img class="card-img front-gif" src="./assets/image/fail_loading.svg">
    *     <img class="card-img front-preview" src="./assets/image/loading.svg">
    * </div> 
    * */
    _createCard_frontImg () {
        let card_frontImg_node = document.createElement("div");
        let front_gif_html = `<img class="card-img front-gif" src="./assets/image/fail_loading.svg">`;  // 缺少正面gif
        let front_preview_html = `<img class="card-img front-preview" src="./assets/image/loading.svg">`  // 缺少正面预览png

        card_frontImg_node.classList.add("card-frontImg");
        card_frontImg_node.innerHTML = front_gif_html + front_preview_html;

        return card_frontImg_node;
    }

    /**
     * back
    * <div class="card-imgBox">
    *     <img class="card-img back-gif" src="./assets/image/fail_loading.svg">
    *     <div class="img-cover">
    *         <div class="img-cover-mask"></div>
    *         <span class="img-cover-overlay" type="button" data-toggle="modal" data-target="#zooming-modal"></span>
    *     </div>
    * </div>
    * */
    _createCard_backImgBox () {
        let card_imgBox_node = document.createElement("div");
        let back_gif_html = `<img class="card-img back-gif" src="./assets/image/fail_loading.svg">`;  // 缺少反面gif
        let img_cover_node = document.createElement("div");
        let img_cover_mask_html = `<div class="img-cover-mask"></div>`;
        // let img_cover_overlay_node = document.createElement("span");
        let img_cover_overlay_html = `<span class="img-cover-overlay" type="button" data-toggle="modal" data-target="#zooming-modal"></span>`;
        // const overlay_attr = {
        //     "type": "button",
        //     "data-toggle": "modal",
        //     "data-target": "#zooming-modal"
        // }

        card_imgBox_node.classList.add("card-imgBox");
        img_cover_node.classList.add("img-cover");
        img_cover_overlay_node.classList.add("img-cover-overlay");
        // Object.keys(overlay_attr).forEach(
        //     (key, i, keyArray) => img_cover_overlay_node.setAttribute(key, overlay_attr[key])
        // );

        img_cover_node.innerHTML = img_cover_mask_html + img_cover_overlay_html;
        card_imgBox_node.innerHTML = back_gif_html;
        card_imgBox_node.appendChild(img_cover_node);
        return card_imgBox_node;
    }

    /**
     * front
    <div class="card-body">
        <div class="card-body-subtitle">HOW</div>
        <p class="card-body-text">Expand and contract rhythmically.</p>
        <div class="card-body-subtitle">WHY</div>
        <p class="card-body-text">Size contrast is a common way of attracting attention
            and conveying importance.
        </p>
        <div class="card-body-subtitle">Applicable Visualization Techniques</div>
        <p class="card-body-text">Size contrast is a common way of attracting attention
            and conveying importance.
        </p>
    </div>
    */
    _createCard_frontBody () {
        let card_body_node = document.createElement("div");
        let card_body_front_Array = [this.parameters["how"], this.parameters["why"], this.parameters["AVT_tag"]];
    }

    /* 
    * front
    * <div class="card-footer">
    *     <span class="card-footer-num">NO. 1</span>
    *     <button class="card-footer-bottom">View examples</button>
    * </div>

    * back
    * <div class="card-footer">
    *     <a href="https://www.theguardian.com/commentisfree/video/2013/oct/08/inequality-how-wealth-distributed-uk-animated-video" target="_blank">
    *         <span class="card-footer-url"></span>URL
    *     </a>
    *     <button class="card-footer-bottom">Back to front</button>
    * </div>
    */
    _createCard_footer (direction = 1) {

        let left_html = "";
        let button_text = "";
        let card_footer_bottom_html = "";
        let card_footer_node = document.createElement("div");

        if(direction === 0) {
            // negative
            left_html = `<a href="${this.parameters["eg_url"]}" target="_blank"><span class="card-footer-url"></span>URL</a>`;
            button_text = "View examples";
        } else {
            // positive
            left_html = `<span class="card-footer-num">NO. ${this.parameters["card_id"]}</span>`;
            button_text = "Back to front";
        }
        
        card_footer_bottom_html = `<button class="card-footer-bottom">${button_text}</button>`;
        card_footer_node.classList.add("card-footer");

        card_footer_node.innerHTML = left_html + card_footer_bottom_html;
        return card_footer_node;
    }
}

Homepage_Card.frontBody_iterator = function *(items = []) {

    const card_frontBody_titleArr = ["HOW", "WHY", "Applicable Visualization Techniques"];
    let card_frontBody_partHtml = "";
    for (let i = 0; i < items.length; i++) {
        card_frontBody_partHtml = 
            `<div class="card-body-subtitle">${card_frontBody_titleArr[i]}</div>
            <p class="card-body-text">${items[i]}</p>`;

        yield card_frontBody_partHtml;
    }
}

class Homepage_Reminder {
    constructor({}) {

    }
}

export {
    Homepage_Card as Homepage_Card,
    Homepage_Reminder as Homepage_Reminder
};